<template>
  <div class="service-main">
    <div class="service-title">
      <div class="title-list">
        <div
          :class="{'active':serviceShow == index}"
          v-for="(item , index) in ServiceList"
          :key="index"
          @click="serviceShow = index"
        >{{item.typeTitle}}</div>
      </div>
      <router-link :to="{path:'/interactive/list',query:{type:Type}}" v-show="IsList">+MORE</router-link>
    </div>
    <ul>
      <li v-for="(item , index) in ServiceList" :key="index" v-show="serviceShow == index">
        <div v-for="(list , _index) in item.type" :key="_index">
          <p class="only-1">{{list.title}}</p>
          <div class="multi-line">{{list.content}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "serviceList",
  props: {
    ServiceList: Array,
    IsList:{
        type:Boolean,
        default:true,
    },
    Type:Number
  },
  data() {
    return {
      serviceShow: 0
    };
  }
};
</script>

<style lang="scss" scoped>
.service-main {
  .service-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    a {
      font-size: 12px;
      color: #333;
    }
  }
  .title-list {
    display: flex;
    div {
      width: 128px;
      height: 43px;
      background: rgba(229, 229, 229, 1);
      text-align: center;
      line-height: 43px;
      margin-right: 2px;
      color: #666;
      cursor: pointer;
      &.active {
        background-color: #e5b87f;
        color: #fff;
      }
    }
  }
  ul {
    li {
      > div {
        display: inline-block;
        width: 590px;
        height: 116px;
        padding: 16px;
        margin-top: 20px;
        background: rgba(255, 255, 255, 1);
        &:nth-child(2n) {
          margin-left: 20px;
        }
        p {
          margin-bottom: 10px;
          font-size: 16px;
          font-weight: bold;
        }
        div {
          font-size: 14px;
          line-height: 2;
          color: #999;
        }
      }
    }
  }
}
</style>